<script setup>
const props = defineProps({
  line: Object,
  link: Object,
  relationGraph: Object,
})

const pathData = computed(() => {
  const fx = props.link.fromNode.x + 48
  const fy = props.link.fromNode.y + 48 * 0.5
  const tx = props.link.toNode.x + 15
  const ty = props.link.toNode.y + 28 * 0.5
  const dx = tx - fx
  const dy = ty - fy
  return ty > fy ? `M${fx} ${fy + dy * 0.5}C${fx} ${fy + dy * 0.5} ${fx + dx * 0.1047} ${fy + dy * 1.4264} ${fx + dx * 0.8638} ${fy + dy * 1.2487}` : `M${fx} ${fy}C${fx} ${fy} ${fx + dx * 0.1047} ${fy + dy * 0.9264} ${fx + dx * 0.8638} ${fy + dy * 0.7487}`
})
</script>

<template>
  <g
    @click="onLineClick(line, $event)"
  >
    <path
      :d="pathData"
      stroke="#0173E7"
      :style="{ 'stroke-width': `${3}px` }"
      fill="none"
    />
  </g>
</template>

<style lang='scss' scoped>

</style>
